<template>
    <div class="zhang">
        <div>
            <h1 style="text-align: left;">账号与密码</h1>
            <el-divider></el-divider>
            <div style="margin: 10px">
                <h2 style="text-align: left;">账号设置</h2>
                <h6 style="text-align: left;color: rgba(43,46,72,0.45)">注意：为保证账号安全，需进行二次验证</h6>
                <el-divider></el-divider>
                <div class="mi">
                    <div><h4>密码</h4></div>
                    <div> {{ mima }}</div>
                </div>
                <p style="text-align: right;margin: 10px">
                    <el-link type="primary">编辑</el-link>
                </p>

                <el-divider></el-divider>
                <div class="mi">
                    <div><h4>绑定手机</h4></div>
                    <div> {{ telephone }}</div>
                </div>
                <p style="text-align: right;margin: 10px">
                    <el-link type="primary">编辑</el-link>
                </p>

            </div>
        </div>
    </div>

</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            mima: '*******',
            telephone: ''

        }
    },

    methods: {
        getinfo(){
            const userId = this.$store.getters.getuserId;
            axios.get(`/api/userinfo?id=${userId}`)
                .then(response => {
                    const responseData = response.data;
                    this.telephone = responseData.telnumber;
                    console.log(response.data)
                })
                .catch(error => {
                    console.error('Error fetching data:啊啊啊啊', error);
                });
        }
    },
    mounted() {
        this.getinfo();
    }
}
</script>
<style scoped>
.zhang {
    color: #3b3b3b;
    margin: 10px;
}
.mi {
    margin: 10px;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
</style>